<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册</title>
	<style type="text/css">
		table{
			margin: auto;
			border: black solid 0px;
			border-collapse: collapse;
		}
		td{
			padding: 10px;
			border: black solid 0px;
		}
	</style>
	<script type="text/javascript" src="${pageContext.request.contextPath}/3rd/jquery/jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
		function fun(){
			var inputNode = document.getElementById("checkedCode");
			var spanNode = document.getElementById("sid");
			var val = inputNode.value;
			var url = "${pageContext.request.contextPath}/checked?id=" + new Date().getTime();
			var sendData = {code : val};
			if(val.length == 4){
				$.post(url,sendData,function(backData){
						if(backData == "true"){
							spanNode.innerHTML = "√".fontcolor("green");
						}else{
							spanNode.innerHTML = "×".fontcolor("red");
						}
					}
				);
			}
		}
		function findname(){
			var inputNode = document.getElementById("name");
			var spanNode = document.getElementById("s");
			var sendData = {name : inputNode.value};
			var url = "${pageContext.request.contextPath}/user?action=find&id=" + new Date().getTime();
			$.post(url,sendData,function(backDate){
					if(backDate == "true"){
						spanNode.innerHTML = "√".fontcolor("green");
					}else{
						spanNode.innerHTML = "用户名已存在".fontcolor("red");
					}
				}
			);
		}
	</script>
</head>
<body>
	<c:choose>
		<c:when test="${action == 'checkedFail'}">
			<table>
				<form action="${pageContext.request.contextPath}/user?action=register" method="post">
					<caption><h1>用户注册</h1></caption>
					<tr>
						<td align="right">用户名:</td>
						<td><input type="text" name="name" id="name" onblur="findname()"><span id="s"></span></td>
					</tr>
					<tr>
						<td align="right">密码:</td>
						<td><input type="password" name="password"></td>
					</tr>
					<tr>
						<td align="right">电话:</td>
						<td><input type="text" name="phone"></td>
					</tr>
					<tr>
						<td align="right">验证码:</td>
						<td>
							<input type="text" name="checkedCode" id="checkedCode" maxlength="4" size="4" onkeyup="fun()">
							<img src="01_image.jsp"><span id="sid"></span>
						</td>
					</tr>
					<tr>
						<td colspan="2" align="center"><input type="submit" value="提交"></td>
					</tr>
					<tr>
						<td colspan="2" align="center"><font color="red">验证码输入有误</font></td>
					</tr>
				</form>
			</table>
		</c:when>
		<c:otherwise>
			<table>
				<form action="${pageContext.request.contextPath}/user?action=register" method="post">
					<caption><h1>用户注册</h1></caption>
					<tr>
						<td align="right">用户名:</td>
						<td><input type="text" name="name" id="name" onblur="findname()"><span id="s"></span></td>
					</tr>
					<tr>
						<td align="right">密码:</td>
						<td><input type="password" name="password"></td>
					</tr>
					<tr>
						<td align="right">电话:</td>
						<td><input type="text" name="phone"></td>
					</tr>
					<tr>
						<td align="right">验证码:</td>
						<td>
							<input type="text" name="checkedCode" id="checkedCode" maxlength="4" size="4" onkeyup="fun()">
							<img src="01_image.jsp"><span id="sid"></span>
						</td>
					</tr>
					<tr>
						<td colspan="2" align="center"><input type="submit" value="提交"></td>
					</tr>
				</form>
			</table>
		</c:otherwise>
	</c:choose>
</body>
</html>